<template>
    <div class="item">
        <input id="switch" type="checkbox" hidden>
        <label for="switch">
            <div class="slider"></div>
            <div class="ground"></div>
            <div class="star"></div>
            <div class="mountain1"></div>
            <div class="mountain2"></div>
            <div class="cloud"></div>
            <div class="cloud1"></div>
            <div class="cloud2"></div>
            <div class="pit1"></div>
            <div class="pit2"></div>
            <div class="pit3"></div>
            <ul>
                <li v-for="i in 15" :key="i" :style="`--left:${i*20*Math.random()}px;--top:${i%3*5+5}px`"></li>
            </ul>
        </label>
    </div>
</template>

<style scoped lang="scss">
.item {
    width: 100%;
    height: 100vh;

    label {
        width: 120px;
        height: 50px;
        border-radius: 25px;
        background-color: #01b1d0;
        display: block;
        z-index: 1;
        transition: all 1s;
        position: relative;
        overflow: hidden;

        .slider {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e1db91;
            position: absolute;
            left: 2px;
            top: 5px;
            z-index: 10;
            transition: all 1s;
        }

        .ground {
            width: 100%;
            height: 10px;
            background-color: #eaba6f;
            position: absolute;
            bottom: 0;
            z-index: 8;
            transition: all 1s;
        }

        .star {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #eaba6f;
            position: absolute;
            top: 2px;
            left: 50px;
            z-index: 8;
            transition: all 1s;
        }

        .mountain1 {
            width: 87px;
            height: 22px;
            left: 33px;
            z-index: 7;
            background-color: #e26b2d;
            position: absolute;
            bottom: 0;
            transition: all .5s;

            &::before {
                content: "";
                position: absolute;
                width: 35px;
                height: 20px;
                border-radius: 50%;
                left: -6px;
                top: -9px;
                background-color: #01b1d0;
                transform: rotate(-20deg);
                transition: background-color 1s;
            }

            &::after {
                content: "";
                position: absolute;
                width: 65px;
                height: 35px;
                border-radius: 50%;
                right: -4px;
                top: -25px;
                background-color: #01b1d0;
                transition: background-color 1s;
            }
        }

        .cloud {
            width: 25px;
            height: 6px;
            background-color: white;
            border-radius: 6px;
            position: absolute;
            top: 15px;
            right: 20px;
            z-index: 12;
            transition: all 1s;
        }

        .cloud1 {
            width: 8px;
            height: 8px;
            position: absolute;
            border-radius: 50%;
            background-color: white;
            top: 12px;
            right: 33px;
            z-index: 12;
            transition: all 1s;

        }

        .cloud2 {
            width: 12px;
            height: 12px;
            position: absolute;
            border-radius: 50%;
            background-color: white;
            top: 9px;
            right: 25px;
            z-index: 12;
            transition: all 1s;

        }

        .pit1 {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            position: absolute;
            top: 11px;
            right: 18px;
            z-index: 11;
        }

        .pit2 {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            position: absolute;
            top: 21px;
            right: 28px;
            z-index: 11;
        }

        .pit3 {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            position: absolute;
            top: 30px;
            right: 13px;
            z-index: 11;
        }

        li {
            width: 2px;
            height: 2px;
            border-radius: 50%;
            position: absolute;
            list-style-type: none;
            top: var(--top);
            background-color: transparent;
            left: var(--left);
            transition: all 1s;
        }
    }

    input:checked + label {
        background-color: #051e65;
        transition: all 1s;

        .slider {
            transform: translate(74px);
            transition: all 1s;
            background-color: #4f85af;
        }

        .pit1, .pit2, .pit3 {
            transform: translate(4px);
            background-color: #263b58;
            transition: all 1s cubic-bezier(0.68, -0.55, 0.28, 1);
        }

        li {
            background-color: white;
            transition: all 1s;
        }

        .ground {
            background-color: #0e55b4;
            transition: all 1.2s;
        }

        .mountain1 {
            background-color: #1a5f80;
            transition: all .5s;

            &::before {
                background-color: #051e65;
                transition: all 1s;
            }

            &::after {
                background-color: #051e65;
                transition: all 1s;
            }
        }

        .cloud, .cloud1, .cloud2 {
            transform: translate(-50px, 5px);
            background-color: #c0bfbf;
            transition: all 1s;
        }

        .star {
            background-color: #e5e8ce;
            transform: translate(-5px, 10px);
            transition: all 1s;
        }
    }

}
</style>
